<template>
  <base-breadcrumb v-loading="loading">
    <div class="about-master-container">
      <BForms ref="forms">
        <a-card>
          <title-name title="基本信息" />
          <BForm :config="config1" :form="form" :rule="rule" @selectOrg="selectOrg" />
        </a-card>
        <a-card>
          <title-name title="管理内容" />
          <editor v-model="form.content" :max-length="100000" :is-clear="true" :disabled="disabled" />
        </a-card>
        <a-card>
          <title-name title="现场图片" />
          <BForm :config="config2" :form="form" :rule="rule" />
        </a-card>
      </BForms>
      <div class="page-btn-right-top page-btn-right-top">
        <a-button v-if="!disabled" @click="submit" type="primary">提交</a-button>
        <a-button @click="$close">关闭</a-button>
      </div>
    </div>
  </base-breadcrumb>
</template>
<script>
import { create, findById, update } from '@/api/material/use/scene'
import SelectSubCompany from '@/components/Select/SelectSubCompany'
import SelectProject from '@/components/Select/SelectProject'
import SelectSubcontractor from '@/components/Select/SelectSubcontractor'
import E from 'wangeditor'
import editor from '@/components/Editor/editor'
import BUploadVModel from '@/components/BComponents/BUploadVModel'
import BSelect from '@/components/BComponents/BSelect'
import { selectOption } from '@/api/material/goods/goods'

export default {
  name: 'add',
  components: {
    editor,
    SelectSubcontractor
  },
  props: {
    modelValue: false
  },
  data() {
    return {
      loading: false,
      isInput: false,
      init: false,
      form: {
        id: null,
        fileInfoVos: [],
        subContractName: '',
        subContractId: '',
        projectId: '',
        creatorName: this.$userInfo().name,
        createTime: this.$dateFormat(Date.now(), 'D')
      },
      rule: {
        branchComId: { required: true, message: '请选择所属分公司', trigger: 'change' },
        projectId: { required: true, message: '请选择项目名称', trigger: 'change' },
        typesLabelId: { required: true, message: '请选择类型', trigger: 'change' },
        subContractName: { required: true, message: '请选择分包商', trigger: 'change' },
        fileInfoVos: { required: true, message: '请上传图片', trigger: 'change' },
        content: { required: true, message: '请输入管理内容', trigger: 'change' }
      }
    }
  },
  computed: {
    disabled() {
      return this.$route.query.pageType === 'look'
    },
    config1() {
      return [
        {
          row: true,
          children: [
            { type: 'input', value: 'code', label: '管理单编号', attrs: { disabled: true } },
            {
              type: 'orgTree',
              span: 16,
              keyName: 'projectId',
              label: '所属单位',
              disabled: this.disabled,
              isAutoSelectFirst: this.form.id === null,
              isNeedAuth: true,
              checkStrictly: true
            },

            // { type: 'input', value: 'viewName', label: '所属单位', attrs: { disabled: this.disabled }, colSpan: 16 },
            // {
            //   type: SelectSubCompany,
            //   value: 'branchComId',
            //   label: '所属分公司',
            //   attrs: {
            //     autoSelected: this.form.id === null,
            //   },
            //   on: {
            //     selectChange: e => this.form.branchComName = e.orgName
            //   },
            //   show: !this.disabled
            // },
            // {
            //   type: SelectProject,
            //   value: 'projectId',
            //   label: '项目名称',
            //   attrs: {
            //     isUseChangeEvent: true,
            //     // isSelf: false,
            //     isEdit: this.form.id !== null,
            //     form: this.form,
            //     keyValue: 'branchComId'
            //   },
            //   on: {
            //     selectChange: async e => {
            //       if (e) {
            //         this.form.projectName = e.name
            //         if (this.init && !this.disabled) {
            //           this.form.subContractId = ''
            //           this.form.subContractName = ''
            //         } else {
            //           this.init = true
            //         }
            //       }
            //     }
            //   },
            //   show: !this.disabled
            // },
            { type: 'input', value: 'branchComName', label: '分公司', attrs: { disabled: true }, show: this.disabled },
            { type: 'input', value: 'projectName', label: '项目', attrs: { disabled: true }, show: this.disabled },
            {
              type: BSelect,
              value: 'typesLabelId',
              label: '类型',
              attrs: {
                disabled: this.disabled,
                request: () => {
                  return selectOption({ type: 35 })
                }
              }
            },
            {
              type: 'custom',
              value: 'subContractName',
              label: '分包商名称',
              show: !this.disabled,
              render: () => {
                let temp
                if (this.isInput) {
                  temp = <b-input style="width: 75%;" v-model={this.form.subContractName} />
                } else {
                  temp = (
                    <SelectSubcontractor
                      style="width: 75%;"
                      v-model={this.form.subContractId}
                      placeholder="请选择"
                      keyValue="projectId"
                      isClear={this.disabled}
                      isEdit={this.disabled}
                      form={this.form}
                      onSelectChange={(e) => (this.form.subContractName = e?.name)}
                    />
                  )
                }
                return (
                  <div class="flex">
                    {temp}
                    <a onClick={this.toggleSub.bind(this)}>其他单位</a>
                  </div>
                )
              }
            },
            { type: 'input', value: 'subContractName', label: '分包商名称', attrs: { disabled: true }, show: this.disabled },
            { type: 'input', value: 'creatorName', label: '创建人', attrs: { disabled: true } },
            { type: 'input', value: 'createTime', label: '创建时间', attrs: { disabled: true } }
          ]
        }
      ]
    },
    config2() {
      return [
        {
          row: true,
          children: [
            {
              type: BUploadVModel,
              value: 'fileInfoVos',
              label: '图片上传',
              colSpan: 24,
              noFixed: true,
              attrs: {
                maxUploadCount: 1000,
                disabled: this.disabled,
                businessCode: 'UN09',
                uploadType: 'image-list'
              }
            }
          ]
        }
      ]
    }
  },
  watch: {},
  created() {
    if (this.$route.query.id) {
      this.form.id = this.$route.query.id
      this.getData()
    }
  },
  methods: {
    selectOrg(e) {
      this.form.projectId = e[e.length - 1].projectId
      this.form.projectName = e[e.length - 1].projectName
      this.form.branchComId = e[e.length - 2].orgId;
      this.form.branchComName = e[e.length - 2].orgName;
      if (e) {
        if (this.init && !this.disabled) {
          this.form.subContractId = ''
          this.form.subContractName = ''
        } else {
          this.init = true
        }
      }
    },
    toggleSub() {
      this.isInput = !this.isInput
      this.form.subContractName = this.form.subContractId = ''
    },
    async getData() {
      this.loading = true
      let res = await findById({ id: this.form.id })
      this.loading = false
      if (res.code === this.SUCCESS_CODE) {
        this.form = res.data
        if (!this.form.subContractId) {
          this.isInput = true
        }
      }
    },
    async submit() {
      await this.save()
    },
    async save() {
      this.$console(this.form)
      // if (!this.form.content) return this.$noticeWarning('请输入管理内容')
      this.$refs.forms.validate(async (valid) => {
        if (valid) {
          this.loading = true
          let temp = this.$clone(this.form)
          let res
          if (temp.id) {
            res = await update({}, temp)
          } else {
            res = await create({}, temp)
          }
          this.loading = false
          if (res.code === this.SUCCESS_CODE) {
            this.$noticeSuccess('成功')
            this.$close()
          }
        }
      })
    }
  }
}
</script>
